import Modal from '@/components/Modal';
import { Button, View, PickerView, PickerViewColumn, Text } from '@tarojs/components';

import React from 'react';

import './index.less'
import { DynamicColors } from '@/utils/DarkMode';
import { GButton } from '../GButton';
import I18n from 'i18n-js';

const styles = {
  pickerView: {
    height: 200,
  },
  pickerViewItem: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
}
export default ({show, onChange, value =0 ,options = [], title, onCancel, onConfirm}) => {
  return (
    <Modal visible={show}>
      <View onClick={onCancel} className='bottom-picker-mask'></View>
      <View className='bottom-picker-content'>
        <Text className='bottom-picker-title'>{title}</Text>
        <PickerView style={styles.pickerView} value={[value]} onChange={(v) => onChange(v.detail.value[0])}>
          <PickerViewColumn>
            {options.map(item => {
              return (
                <View key={item} style={styles.pickerViewItem}>
                  <Text>{item}</Text>
                </View>
              );
            })}
          </PickerViewColumn>
        </PickerView>
        <GButton text={I18n.t('CONFIRM')} onPress={onConfirm}>
        </GButton>
        <View style={{height: 20}}></View>
      </View>
    </Modal>
  )
}